<template>
  <div class="header">
    <div class="ceshi">
      <img src="../../assets/Pictures/tu40.png">
    </div>
    <p class="test">测一测</p>
    <div class="news">
      <img src="../../assets/Pictures/tu41.png">
    </div>
  </div>
  <div class="Contant">
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img src="../../assets/Pictures/tu1.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/Pictures/tu2.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/Pictures/tu3.jpg"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid direction="horizontal" :column-num="2">
        <van-grid-item text="搜索" />
        <van-grid-item text="分类" @click="Fenlei"/>
      </van-grid>
    </div>

    <!-- 热门话题 -->
    <div class="hot-topic">
      <div class="box">
        <p class="topic">热门话题</p>
        <p class="more">更多<span>＞</span></p>
      </div>
      <div class="box2">
        <div class="hot2">
          <p class="symBol">#</p>
          <p class="collect">「征集」你想聊得话题</p>
          <p class="discuss">39.1k条讨论</p>
        </div>
        <div class="hot3">
          <p class="symBol">#</p>
          <p class="collect2">你们是每天敷面膜吗</p>
          <p class="discuss2">1671条讨论</p>
        </div>
        <div class="hot3">
          <p class="symBol">#</p>
          <p class="collect2">给学生党的彩妆合集（评价又好用）</p>
          <p class="discuss2">1877条讨论</p>
        </div>
      </div>
    </div>

    <!-- 同肤质在聊 -->
    <div class="skin-type">
      <div class="box">
        <p class="topic">同肤质在聊</p>
        <p class="more">更多<span>＞</span></p>
      </div>
      <div class="box2">
        <div class="hot2">
          <p class="symBol">#</p>
          <p class="collect2">适合油皮的眼霜推荐</p>
          <p class="discuss">39.1k条讨论</p>
        </div>
        <div class="hot3">
          <p class="symBol">#</p>
          <p class="collect2">大油田也别作死，过度清洁会烂脸</p>
          <p class="discuss2">1671条讨论</p>
        </div>
        <div class="hot3">
          <p class="symBol">#</p>
          <p class="collect2">白天脸上爱出油，吸油纸还是保湿喷雾</p>
          <p class="discuss2">1877条讨论</p>
        </div>
      </div>
    </div>

    <!-- 新话题 -->
    <div class="skin-type">
      <div class="box">
        <p class="topic">新话题</p>
        <p class="more">更多<span>＞</span></p>
      </div>
      <div class="box2">
        <div class="hot2">
          <p class="symBol">#</p>
          <p class="collect2">适合油皮的眼霜推荐</p>
          <p class="discuss">39.1k条讨论</p>
        </div>
        <div class="hot3">
          <p class="symBol">#</p>
          <p class="collect2">大油田也别作死，过度清洁会烂脸</p>
          <p class="discuss2">1671条讨论</p>
        </div>
        <div class="hot3">
          <p class="symBol">#</p>
          <p class="collect2">白天脸上爱出油，吸油纸还是保湿喷雾</p>
          <p class="discuss2">1877条讨论</p>
        </div>
      </div>
    </div>
    <div class="day-talk">
      <p>今天聊什么</p>
    </div>
    <van-tabs v-model="active" animated>
      <van-tab title=关注>
        <img src="../../assets/Pictures/tu5.png" class="tu">
        <img src="../../assets/Pictures/tu4.png" class="tu">
      </van-tab>
      <van-tab title=精选>
        <img src="../../assets/Pictures/tu7.png" class="tu2">
        <img src="../../assets/Pictures/tu6.png" class="tu2">
      </van-tab>
      <van-tab title=新帖>
        <img src="../../assets/Pictures/tu5.png" class="tu">
        <img src="../../assets/Pictures/tu4.png" class="tu">
      </van-tab>
      <van-tab title=一周最热>
        <img src="../../assets/Pictures/tu7.png" class="tu2">
        <img src="../../assets/Pictures/tu8.png" class="tu2">
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
// import BScroll from "@better-scroll/core";

export default {
  data() {
    return {
      active: 2,
    };
  },
  methods:{
    Fenlei(){
      this.$router.push("/classify");
    },
    // setBs(){
    //   new BScroll(".Contant",{
    //     scrollY: true,
    //     scrollX: false,
    //     click: true,
    //   });
    // }
  },
};
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  height: 55px;
  position: relative;
}
.ceshi{
  width: 25px;
  height: 25px;
  position: absolute;
  top: 17px;
  left: 13px;
}
.ceshi img{
  width: 100%;
  height: 100%;
}
.test{
  font-size: 15px;
  position: absolute;
  top: 24px;
  left: 45px;
}
.news{
  width: 20px;
  height: 23px;
  position: absolute;
  top: 15px;
  right: 13px;
}
.news img{
  width: 100%;
  height: 100%;
}
.Contant {
  position: fixed;
  top: 55px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow: auto;
}
.my-swipe .van-swipe-item {
  height: 125px;
  position: relative;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 125px;
  position: absolute;
  top: 0px;
  left: 0px;
}
/deep/ .van-grid-item__text {
  font-size: 15.5px;
  font-weight: bolder;
  color: rgb(66, 65, 65);
}
.hot-topic {
  width: 100%;
  height: 174.5px;
  border-top: 1.5px solid rgb(218, 214, 214);
}
.box {
  display: flex;
  justify-content: space-between;
}
.topic {
  font-size: 15.5px;
  color: #000000;
  font-weight: bolder;
  margin-left: 16.5px;
  margin-top: 30px;
}
.more {
  font-size: 12.5px;
  color: #b9b9b9;
  margin-top: 32px;
}
.more span {
  margin-right: 14px;
}
.box2 {
  height: 109px;
  width: 348px;
  margin-left: 25px;
  border-bottom: 1px solid rgb(218, 214, 214);
}
.hot2 {
  display: flex;
  margin-top: 27px;
}
.symBol {
  font-size: 12px;
  color: #78cccd;
}
.collect {
  font-size: 13.5px;
  color: #010101;
  font-weight: bolder;
}
.discuss {
  font-size: 10px;
  margin-left: 9.5px;
  color: #afafaf;
  margin-top: 3px;
}
.hot3 {
  display: flex;
  margin-top: 22px;
}
.collect2 {
  font-size: 13.5px;
  color: #010101;
  font-weight: bolder;
  margin-left: 6px;
}
.discuss2 {
  font-size: 10px;
  margin-left: 9.5px;
  color: #afafaf;
  margin-top: 3px;
  margin-left: 6px;
}
.skin-type {
  width: 100%;
  height: 174.5px;
}
.day-talk{
  width: 100%;
  height: 30px;
}
.day-talk p{
  font-size: 15.5px;
  color: #000000;
  font-weight: bolder;
  margin-top: 30px;
  margin-left: 17px;
}
/deep/.van-tab{
  font-size: 14.5px;
  color: #8F8F8F;
}
/deep/.van-tabs__line{
  background-color: #72CDCD;
  width: 75px;
}
/deep/.van-tabs__nav{
  margin-left: 60px;
}
/deep/.van-tab:hover{
  color: #72CDCD;
}
/deep/.van-tab__pane{
  display: flex;
}
.tu{
  width: 190.5px;
  height: 314px;
}
.tu2{
  width: 178.5px;
  height: 160;
}
/deep/.van-nav-bar__content{
  height: 55px;
}
</style>